<!doctype html>
<!--
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <meta charset="utf-8">
  <script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
  <script src="wct-browser-config.js"></script>
  <script src="../../node_modules/wct-browser-legacy/browser.js"></script>
  <script type="module" src="../../polymer-legacy.js"></script>
<body>

  <dom-module id="my-element">
    <template>
      <div id="content"></div>
    </template>
    <script type="module">
import { LegacyElementMixin } from '../../lib/legacy/legacy-element-mixin.js';

class MyElement extends LegacyElementMixin(HTMLElement) {

  static get is() { return 'my-element'; }

  static get properties() {
    return {
      prop: {
        value: 'base'
      }
    };
  }

  created() {
    super.created();
    this._calledCreated++;
  }

  attached() {
    super.attached();
    this._calledAttached++;
  }

  attributeChanged() {
    super.attributeChanged.apply(this, arguments);
    this._callAttributeChanged++;
  }

  ready() {
    super.ready();
    this._calledReady++;
  }
}

MyElement.prototype._calledCreated = 0;
MyElement.prototype._calledAttached = 0;
MyElement.prototype._calledReady = 0;
MyElement.prototype._callAttributeChanged = 0;

customElements.define(MyElement.is, MyElement);

window.MyElement = MyElement;
</script>
  </dom-module>


  <dom-module id="sub-element">
    <script type="module">

class SubElement extends window.MyElement {

  static get is() { return 'sub-element'; }

  created() {
    super.created();
    this._calledCreated++;
  }

  attached() {
    super.attached();
    this._calledAttached++;
  }

  ready() {
    super.ready();
    this._calledReady++;
  }

}

customElements.define(SubElement.is, SubElement);

window.SubElement = SubElement;
</script>
  </dom-module>

  <test-fixture id="my-element-attr">
    <template>
      <my-element prop="attr"></my-element>
    </template>
  </test-fixture>

  <script type="module">
import { PolymerElement } from '../../polymer-element.js';
import { ElementMixin } from '../../lib/mixins/element-mixin.js';
import { LegacyElementMixin } from '../../lib/legacy/legacy-element-mixin.js';
suite('class extends Polymer.LegacyElementMixin(HTMLElement)', function() {

  var el;

  setup(function() {
    el = document.createElement('my-element');
    document.body.appendChild(el);
  });

  teardown(function() {
    document.body.removeChild(el);
  });

  test('instanceof', function() {
    assert.instanceOf(el, HTMLElement);
    assert.instanceOf(el, PolymerElement);
    assert.instanceOf(el, window.MyElement);
  });

  test('lifecycle', function() {
    assert.equal(el._calledCreated, 1);
    assert.equal(el._calledAttached, 1);
    assert.equal(el._calledReady, 1);
    assert.equal(el._callAttributeChanged, 0);
  });

  test('attributes', function() {
    var fixtureEl = fixture('my-element-attr');
    assert.equal(fixtureEl.prop, 'attr');
    assert.equal(fixtureEl._callAttributeChanged, 1);
  });

});

suite('subclass', function() {

  var el;

  setup(function() {
    el = document.createElement('sub-element');
    document.body.appendChild(el);
  });

  teardown(function() {
    document.body.removeChild(el);
  });

  test('instanceof', function() {
    assert.instanceOf(el, HTMLElement);
    assert.instanceOf(el, PolymerElement);
    assert.instanceOf(el, window.MyElement);
    assert.instanceOf(el, window.SubElement);
  });

  test('lifecycle', function() {
    assert.equal(el._calledCreated, 2);
    assert.equal(el._calledAttached, 2);
    assert.equal(el._calledReady, 2);
    assert.equal(el._callAttributeChanged, 0);
  });

});

suite('misc', function() {

  test('Polymer.ElementMixin caches', function() {
    assert.equal(PolymerElement, ElementMixin(HTMLElement));
     assert.equal(ElementMixin(HTMLElement),
       ElementMixin(HTMLElement));
  });

   test('Polymer.LegacyElementMixin caches', function() {
     assert.equal(LegacyElementMixin(HTMLElement),
       LegacyElementMixin(HTMLElement));
   });

});
</script>
</body>
</html>
